import { Avatar, Tooltip } from 'antd';

const AvatarList = ({ maxCount = 5, data }) => {
  return (
    <Avatar.Group
      maxCount={maxCount}
      maxPopoverTrigger="click"
      size="large"
      maxStyle={{
        color: '#f56a00',
        backgroundColor: '#fde3cf',
        cursor: 'pointer',
      }}
    >
      {data?.map((_item, _index) => {
        return (
          <Tooltip key={_index} title={_item?.name} placement="top">
            <Avatar size="default" style={{ backgroundColor: '#f56a00' }}>
              {_item?.name?.slice(0, 1)}
            </Avatar>
          </Tooltip>
        );
      })}
    </Avatar.Group>
  );
};

export default AvatarList;
